<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量的定义</title>
    <script>
        function f1(){
            // 在ES6之前使用var对变量进行定义
            // 在ES6之后,引入了一个新的定义修饰符let
            var name;
            name = "admin";
            alert(name);
        }
        function f2(){
            var name = "alice";
            alert(name);
        }
        function f3(){
            // js是一个弱类型的语言
            // 因此,其数据类型随时可变
            // 所谓弱类型,对数据类型没有强制要求
            var name = "admin";
            // console.log(内容):在浏览器控制台输出对应的内容
            // 相当于Java中的System.out.println(内容)
            console.log("name:"+name);
            console.log("name的类型:"+typeof name);
            name = 1;
            console.log("name:"+name);
            console.log("name的类型:"+typeof name);
            name = true;
            console.log("name:"+name);
            console.log("name的类型:"+typeof name);
            name = 2.1;
            console.log("name:"+name);
            console.log("name的类型:"+typeof name);
            // js没有返回值类型,但是可以有返回值
            return name;
        }
        function f4(){
            // 在ES6之前,js没有作用域的概念
            for(var i = 0; i < 10; i++){
                // console.log(i);
            }
            // 变量i的作用域在for循环中
            // 出了for循环之后,i就出了对应的作用域
            // 在js中,出了作用域之后,i依然有值
            console.log("i:"+i);

            // 在ES6之后,引入了let的概念
            // 使用let为变量声明时,其变量存在作用域的概念
            for(let j = 0; j < 10; j++){
                // console.log("j:"+j);
            }
            // 此时报错
            // Uncaught ReferenceError: j is not defined
            console.log("j:"+j);
        }
    </script>
</head>
<body>
<button onclick="f1()">先声明,后赋值</button><br/>
<button onclick="f2()">声明的同时赋值</button><br/>
<button onclick="f3()">变量特点1</button><br/>
<button onclick="f4()">变量特点2</button><br/>
</body>
</html>